<template>
  <div class="pay">
    <van-nav-bar title="标题" left-text="返回" left-arrow>
      <template #left>
        <van-icon name="home-o" size="24" />
      </template>
      <template #right>
        <van-icon name="search" size="24" />
        <van-icon name="shopping-cart-o" size="24" />
      </template>
    </van-nav-bar>

    <van-contact-card type="edit" :tel="tel" :name="name" @click="onEdit" />
    <router-view />

    <div class="preferential">
      <div class="item">
        <input type="checkbox" />礼品卡余额：￥
        <van-icon name="arrow" style="float: right" />
      </div>
      <div class="item">
        <input type="checkbox" />余额：￥<van-icon
          name="warning-o"
          style="float: right"
        />
      </div>
    </div>

    <div class="ooo">
      <div>商品合计<span style="float: right">$2990.00</span></div>
      <div>邮费<span style="float: right">$19.00</span></div>
      <div>
        <input type="checkbox" />我要开发票<van-icon
          name="arrow"
          style="float: right"
        />
      </div>
    </div>

    <div class="detailsn">
      <div>包裹1 <span>明天17：30前支付，预计2月15人送达</span></div>
      <van-card
        num="2"
        price="￥2299.00"
        desc="盐湖白"
        title="扫把不用亲自动手，扫拖两用机器人(一代)"
        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      >
        <!-- <div>部分服务不支持</div> -->
      </van-card>
      <div>部分服务不支持</div>
      <div><input type="checkbox" />我已同意《网易严选服务协议》</div>
    </div>

    <div>
      <div></div>

      <div></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { showToast } from "vant";
import { reqSubmitOrder } from "@/api/cart/cart";
const tel = ref("13000000000");
const name = ref("张三");
const onEdit = () => showToast("edit");
onMounted(async() => {
  await reqSubmitOrder()
});
</script>

<style lang="less" scoped>
.pay {
  background-color: #f4f4f4;
  margin: 0 10px;

  .preferential {
    background-color: #fff;
    margin: 10px 0;
    .item {
      padding: 10px;
      margin-left: 10px;
      font-size: 16px;
      color: grey;
    }
  }
  .ooo {
    background-color: #fff;
    div {
      padding: 10px;
      margin-left: 10px;
      font-size: 16px;
    }
  }
  .detailsn {
    background-color: #fff;
    padding: 10px;
    margin-left: 10px;
    font-size: 16px;
  }
}
</style>